<template>
    <div class="cinema-container">
        <div class="cinema">
            <h1>{{cinemaDetail.nm}}</h1>
            <span>{{cinemaDetail.addr}}</span>
        </div>

        <div class="film">
            <div class="movie-fliter" v-if="filmList[filmIndex]"></div>
            <div class="img_bg" v-if="filmList[filmIndex]" :style="{backgroundImage: `url(${picFix(filmList[filmIndex].img)})`}"></div>
            <div id="slider" class="mui-slider film">
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll film-img">
                        <img :class="['mui-control-item',i === filmIndex ? 'mui-active':'']" v-for="(item,i) in filmList" :key="i"
                        @tap="getDetail(i)" :src="picFix(item.img)">
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="film">
            <div class="movie-fliter"></div>
            <div class="film-img">
                <img v-for="(item,i) in filmList" :key="i" :src="picFix(item.img)" @click="getDetail(i)">
            </div>
        </div> -->
        <div class="cinema-film" v-if="filmList[filmIndex]">
            <div class="film-info">
                <span class="film-name">
                    <span>{{filmList[filmIndex].nm}}</span>
                    <span>{{filmList[filmIndex].sc}}</span>分
                </span>
                <span class="film-desc">
                    {{filmList[filmIndex].desc}}
                </span>
            </div>
            <hr>
        </div>

        <div class="cinema-show">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
                        <a :class="['mui-control-item',i==0?'mui-active':' ']" v-for="(item,i) in shows[filmIndex]" :key="i" @tap="getDate(item.showDate)">
                        {{item.dateShow}}
                        </a>
					 </div>
				</div>
			</div>
            <div class="show">
                <div class="sell-card" v-if="showData.vipInfo"> 
                    <span>{{showData.vipInfo[0].tag}}</span>
                    <span>{{showData.vipInfo[0].title}}</span>
                    <span>{{showData.vipInfo[0].process}}>></span>
                </div>
                <div class="sell-time" v-if="newShows[filmIndex]&&newShows[filmIndex][showTime]">
                    <div class="time" v-for="(item,i) in newShows[filmIndex][showTime].plist" :key="i">
                        <span class="span1">
                            <span>{{item.tm}}</span>
                            <span>{{item.tm}}散场</span>
                        </span>
                        <span class="span2">
                            <span>{{item.lang}}{{item.tp}}</span>
                            <span>{{item.th}}</span>
                        </span>
                        <span class="span3">
                            <span><span>￥</span>{{item.vipPrice}}<span>{{item.vipPriceName}}{{item.vipPrice-4}}</span></span>
                            <span>{{item.extraDesc}}</span>
                        </span>
                        <mt-button type="danger" size="small" @click="selectSeat(filmList[filmIndex].nm, filmList[filmIndex].img, item.tm, item.lang, item.tp, item.th, item.vipPrice)">购票</mt-button>
                    </div>
                </div>
            </div>
        </div>
 
    </div>
</template>
<script>
import { Indicator } from 'mint-ui';
import mui from '../../lib/js/mui.min.js'
export default {
    data(){
        return{
            filmId:this.$route.params.fid,
            cinemaId:this.$route.params.cid,
            cinemaDetail:{},
            dealList:{},
            showData:{},
            filmList:{},
            filmIndex:0,
            shows:{},
            showTime:"",
            newShows:{}
        }
    },
    created(){
        Indicator.open({
            text: 'Loading...',
            spinnerType: 'fading-circle'
        });
        console.log(this.$route.params.fid)
        console.log(this.$route.params.cid)
        this.gerCinema()
        if(!this.$route.params.fid){
            this.filmId = JSON.parse(localStorage.getItem('firstFilm'))
            this.getDetail(this.filmId)
            console.log("bbbbbbbbbcccccccccddddddddd")
            console.log(this.filmIndex +"aaaaaaaaaaaaahhhhhhhh")
        }
        this.getDetail(this.filmId)
    },
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
            deceleration:0.0005
        });
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "110.150");
            }
        },
        gerCinema(){
            if(!this.$route.params.fid){
                this.filmId = JSON.parse(localStorage.getItem('firstFilm'))
                console.log("aaaaaaaaaaaaaabbbbbbbbbcccccccc")
                console.log(this.filmId)
            }
            this.$http.get('cinemaDetail',{
                params:{
                    cinemaId:this.cinemaId,
                    movieId:this.filmId
                }
            }).then(result=>{
                console.log(result)
                this.cinemaDetail = result.body.cinemaData
                this.dealList = result.body.dealList
                this.showData = result.body.showData
                this.showData.movies.forEach((item,index)=>{
                    this.filmList[item.id] = item
                    if(this.shows[item.id]){
                        this.shows[item.id]=[]
                    }
                    this.shows[item.id] = item.shows
                    // console.log(item.id)
                })
                // this.filmList = this.filmList.concat(result.body.showData.movies)
                // console.log(this.cinemaDetail)
                // console.log(this.dealList)
                // console.log(this.showData)
                // console.log(this.filmList)
                // console.log(this.shows)
                this.getDate(this.shows[this.filmId][0].showDate)
                this.showData.movies.forEach((it,i)=>{
                    // this.newShows[it.id] = it.shows
                    // if(!this.newShows[this.showTime]){
                    //     this.newShows[this.showTime]=[]
                    // }
                    // console.log(this.newShows[it.id])
                    // console.log(this.newShows[it.id].length)
                    // if(this.newShows[it.id]){
                    //        this.newShows[it.id]={}
                    //    }
                    for(var j=0; j<it.shows.length; j++){
                        var date = it.shows[j].showDate
                        // console.log(date)
                        // console.log(this.newShows[it.id].shows[j].showDate)
                        // console.log(this.newShows[it.id])
                        // this.newShows[it.id].shows[this.newShows[it.id].shows[j].showDate] = this.newShows[it.id].shows[j]
                        if(!this.newShows[it.id]){
                            this.newShows[it.id]={}
                        }
                        this.newShows[it.id][date] = it.shows[j]
                        console.log(this.newShows[it.id][date])
                    }
                })
                
                this.$store.commit("changeTitle",this.cinemaDetail.nm);
                console.log(this.newShows)
                console.log(this.showData.movies)
                Indicator.close();
            })
        },
        getDetail(id){
            this.filmIndex = id
            console.log(this.filmIndex)
        },
        getDate(date){
            this.showTime = date
            console.log(this.showTime)
        },
        selectSeat(fn, img, tm, lang, tp, th, sp){
            // console.log(this.filmList)
            // console.log(this.shows)
            // console.log("aaaaaaaaaaaaaaaaaaa")
            let select = { filmName: fn,
                cinemaName: this.$store.getters.getTitle,
                filmImg:this.picFix(img),
                date: this.showTime +' '+ tm,
                version: lang+tp,
                hall: th.substring(0,3),
                price: sp,
                seat:[]
                }
            localStorage.setItem('seat', JSON.stringify(select))
            let seat = JSON.parse(localStorage.getItem('seat'))
            console.log(seat)
            this.$router.push({name:'seat',query:{film:this.filmId,cinema:this.cinemaId}})
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    touch-action: pan-x;
}
.cinema-container{
    .cinema{
        padding: 15px;
        h1{
            font-size: 18px;
        }
        span{
            font-size: 13px;
            color: rgb(124, 122, 122)
        }
    }
    .film{
        position: relative;
        left: 0;
        width: 100%;
        height: 188px;
        color: white;
        .movie-fliter {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: rgb(189, 188, 188);
        }
        .img_bg {
            width: 100%;
            height: 80%;
            margin-top: 5%;
            z-index: -1;
            overflow: hidden;
            position: absolute;
            -webkit-filter: blur(1.5rem);
            filter: blur(1.5rem);
            background-size: cover;
            background-repeat: no-repeat;
            opacity: .55;
        }
        .film-img{
            height: 100%;
            display: flex;
            align-items: center;
            img{
                width: 100px;
                height: 120px;
            }
            .mui-active{
                border: 0;
                position: relative;
                width: 100px;
                height: 120px;
                border: 2px solid #fff;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
                // &::after {
                //     width: 0;
                //     height: 0;
                //     content: '';
                //     position: absolute;
                //     left: 50%;
                //     -webkit-transform: translateX(-50%);
                //     transform: translateX(-50%);
                //     bottom: -11px;
                //     z-index: 100;
                //     border: 5px solid transparent;
                //     border-top: 5px solid #fff;
                // }
            }
        }
        .mui-segmented-control.mui-scroll-wrapper {
            height: 100%;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            padding: 0;
            margin: 0 20px;
        }
    }
    .cinema-film{
        padding-top: 10px;
        .film-info{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: rgb(255, 182, 57);
            .film-name{
                span:nth-child(1){
                    color: #000;
                    font-size: 18px;
                    font-weight: bold;
                }
                span:nth-child(2){
                    margin-left: 5px;
                    font-size: 18px;
                }
            }
            .film-desc{
                font-size: 13px;
                color: rgb(175, 175, 175);
            }
        }
    }
    .cinema-show{
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: red;
            border-bottom: 2px solid red;
            background: 0 0;
            z-index: 100;
        }
        .show{
            .sell-card{
                width: 100%;
                height: 50px;
                background-color: rgb(252, 232, 232);
                font-size: 12px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                span:nth-child(1){
                    color: white;
                    background-color: orange;
                    padding: 0 1px;
                }
                span:nth-child(2){
                    color: orange;
                }
                span:nth-child(3){
                    color: rgb(172, 169, 169)
                }
            }
            .sell-time{
                .time{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    line-height: 25px;
                    padding: 20px 15px;
                    .span1{
                        display: flex;
                        flex-direction: column;
                        span:nth-child(1){
                            font-size: 20px;
                        }   
                        span:nth-child(2){
                            font-size: 12px;
                            color: rgb(165, 164, 164);
                        }
                    }
                    .span2{
                        display: flex;
                        flex-direction: column;
                        span:nth-child(1){
                            font-size: 13px;
                        }
                        span:nth-child(2){
                            width: 50px;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            font-size: 12px;
                            color: rgb(165, 164, 164);
                        }
                    }
                    .span3{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        span:nth-child(1){
                            font-size: 18px;
                            color: red;
                            height: 20px;
                            
                            span:nth-child(1){
                                font-size: 12px;
                            }
                            span:nth-child(2){
                                font-size: 10px;
                                background-color: orange;
                                color: #fff;
                                padding: 3px;
                                margin: 5px;
                            }
                        }
                        span:nth-child(2){
                            margin-top: 3px;
                            font-size: 12px;
                            color: rgb(165, 164, 164);
                        }
                    }
                }
            }
        }
    }
}
</style>
